@(kind: Option[String])
	@mainWithSearch("Browse") {
		<script src="@routes.Assets.at("layer-v3.0/layer/layer.js")" type="text/javascript"></script>
		<style>
				.button.primary:hover, .button.primary:active, button.primary:hover, button.primary:active, input.primary[type="submit"]:hover, input.primary[type="submit"]:active, input.primary[type="reset"]:hover, input.primary[type="reset"]:active, input.primary[type="button"]:hover, input.primary[type="button"]:active {
					color: #FFF;
					background-color: #286090;
				}

				.button.primary, button.primary, input.primary[type="submit"], input.primary[type="reset"], input.primary[type="button"] {
					background-color: #2d6ca2;
				}

				.btn-sm, .btn-group-sm > .btn {
					padding: 5px 10px;
					font-size: 12px;
					line-height: 1.5;
					border-radius: 4px;
				}

				.fixed-table-container tbody td .th-inner, .fixed-table-container thead th .th-inner {
					padding: 8px;
					line-height: 24px;
					vertical-align: top;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 12px;
					white-space: normal;
				}

				.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
					padding: 8px;
					line-height: 1.42857143;
					vertical-align: top;
					border-top: 1px solid #ddd;
					font-size: 12px;
				}

				#table a {
					font-size: 12px;
				}

				.btn {
					border-radius: 4px;
				}

				.bootstrap-table .fixed-table-container .table thead th{
					vertical-align: middle;
					text-align: center;
				}

		</style>
		<div class="panel panel-default">

			<div class="panel-heading">
				<h3 class="panel-title"><span class="glyphicon glyphicon-eye-open"></span> Browse By</h3>
			</div>
		</div>

		<ul class="nav nav-tabs myMainUl" >

			<li class="active">
				<a href="#mRna" data-toggle="tab" > mRNA and lncRNA </a>
			</li>

			<li class="" id="expressLi">
				<a href="#circRna" data-toggle="tab" > circRNA</a>
			</li>

			<li class="">
				<a href="#pathway" data-toggle="tab" aria-collapseed="false"> Pathway</a>
			</li>

			<li class="">
				<a href="#cell" data-toggle="tab" aria-collapseed="false"> Tissue/Cell origin</a>
			</li>

		</ul>

		<div id="myTabContent" class="tab-content">

			<div class="tab-pane fade in active" id="mRna">

				<form class="registration-form form-horizontal" id="form"
				accept-charset="UTF-8" method="post">

					<div class="form-group">
						<label class="control-label col-sm-3">Sample types:</label>
						<div class="col-sm-6">
							<select class="checkbox form-control" multiple="multiple" name="samples[]" id="myCheckbox" style="width: 100%">
							</select>
						</div>
						<div class="col-sm-2">
							<select class="form-control" name="samplesMethod" style="width: 100%">
							</select>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Gene type:</label>
						<div class="col-sm-3">
							<select class="form-control" name="geneType" id="geneType">
								<option value="both">both</option>
								<option value="lncRNA gene">lncRNA gene</option>
								<option value="protein coding gene">protein coding gene</option>
							</select>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Tissue specificity:</label>
						<div class="col-sm-9">
							<div id="tissueCheckbox" class="checkbox">
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Detection frequency:</label>
						<div class="col-sm-2">
							<input class="form-control" name="dfMin" placeholder="min">
						</div>
						<div class="col-sm-2">
							<input class="form-control" name="dfMax" placeholder="max">
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Different group:</label>
						<div class="col-sm-6">
							<select class="form-control" multiple="multiple" name="diffSamples[]" style="width: 100%">
							</select>
						</div>
						<div class="col-sm-2">
							<select class="form-control" name="diffSamplesMethod" style="width: 100%">
							</select>
						</div>
					</div>

					<div class="form-group">
						<div class="actions col-sm-offset-3 col-sm-2">
							<button type="button" class="btn btn-primary mySearch" style="width: 90%;" >search</button>
						</div>
						<div class="actions col-sm-2">
							<button type="reset" class="btn btn-primary " style="width: 90%;" id="search">reset</button>
						</div>
					</div>
				</form>

				<hr>

				<table class="display table table-bordered myDataTable" id="table" data-pagination="true" data-search="true"
				data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
				style="word-wrap: break-word">
				</table>

			</div>

			<div class="tab-pane " id="circRna">

				<form class="registration-form form-horizontal" id="form"
				accept-charset="UTF-8" method="post">
					<div class="form-group">
						<label class="control-label col-sm-3">Sample types:</label>
						<div class="col-sm-6">
							<select class="checkbox form-control" multiple="multiple" name="samples[]" id="myCheckbox" style="width: 100%">
							</select>
						</div>
						<div class="col-sm-2">
							<select class="form-control" name="samplesMethod" style="width: 100%">
							</select>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">circBase:</label>
						<div class="col-sm-2">
							<select class="form-control" name="circBase">
								<option value="both">both</option>
								<option value="exist">exist</option>
								<option value="na">NA</option>
							</select>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Gene symbol:</label>
						<div class="col-sm-2">
							<select class="form-control myGeneSymbol" name="geneSymbol">
								<option value="both">both</option>
								<option value="exist">exist</option>
								<option value="na">NA</option>
							</select>
						</div>
						<div class="col-sm-2">
							<input class="form-control" name="geneName" placeholder="gene symbol" id="geneName">
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Region:</label>
						<div class="col-sm-2">
							<select name="chr" required class="form-control myChr">
							</select>
						</div>
						<div class="col-sm-2">
							<input class="form-control" name="start" placeholder="start" disabled="true" id="start">
						</div>
						<div class="col-sm-2">
							<input class="form-control" name="end" placeholder="end" disabled="true" id="end">
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Detection frequency:</label>
						<div class="col-sm-2">
							<input class="form-control" name="dfMin" placeholder="min">
						</div>
						<div class="col-sm-2">
							<input class="form-control" name="dfMax" placeholder="max">
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Different group:</label>
						<div class="col-sm-6">
							<select class="form-control" multiple="multiple" name="diffSamples[]" style="width: 100%">
							</select>
						</div>
						<div class="col-sm-2">
							<select class="form-control" name="diffSamplesMethod" style="width: 100%">
							</select>
						</div>
					</div>

					<div class="form-group">
						<div class="actions col-sm-offset-3 col-sm-2">
							<button type="button" class="btn btn-primary mySearch" style="width: 90%;" id="search">
								search</button>
						</div>
						<div class="actions col-sm-2">
							<button type="reset" class="btn btn-primary " style="width: 90%;" id="search">reset</button>
						</div>
					</div>
				</form>

				<hr>

				<table class="display table table-bordered myDataTable" id="table" data-pagination="true" data-search="true"
				data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
				style="word-wrap: break-word">
				</table>

			</div>

			<div class="tab-pane " id="pathway">

				<form class="registration-form form-horizontal" id="form"
				accept-charset="UTF-8" method="post">

					<div class="form-group">
						<label class="control-label col-sm-3">MSigDB source:</label>
						<div class="col-sm-6">
							<select class="checkbox form-control" multiple="multiple" name="sources[]" style="width: 100%">
							</select>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Different group:</label>
						<div class="col-sm-6">
							<select class="form-control" multiple="multiple" name="diffSamples[]" style="width: 100%">
							</select>
						</div>
						<div class="col-sm-2">
							<select class="form-control" name="diffSamplesMethod" style="width: 100%">
							</select>
						</div>
					</div>

					<div class="form-group">
						<div class="actions col-sm-offset-3 col-sm-2">
							<button type="button" class="btn btn-primary mySearch" style="width: 90%;" id="search">
								search</button>
						</div>
						<div class="actions col-sm-2">
							<button type="reset" class="btn btn-primary " style="width: 90%;" id="search">reset</button>
						</div>
					</div>
				</form>

				<hr>

				<table class="display table table-bordered myDataTable" id="table" data-pagination="true" data-search="true"
				data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
				style="word-wrap: break-word">
				</table>

			</div>

			<div class="tab-pane " id="cell">

				<form class="registration-form form-horizontal" id="form"
				accept-charset="UTF-8" method="post">

					<div class="form-group">
						<label class="control-label col-sm-3">Main category:</label>
						<div class="col-sm-6">
							<select class="checkbox form-control" multiple="multiple" name="cellOrigins[]" style="width: 100%">
							</select>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Tissue/Cell type:</label>
						<div class="col-sm-6">
							<select class="checkbox form-control" multiple="multiple" name="cellTypes[]" style="width: 100%">
							</select>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Different group:</label>
						<div class="col-sm-6">
							<select class="form-control" multiple="multiple" name="diffSamples[]" style="width: 100%">
							</select>
						</div>
						<div class="col-sm-2">
							<select class="form-control" name="diffSamplesMethod" style="width: 100%">
							</select>
						</div>
					</div>

					<div class="form-group">
						<div class="actions col-sm-offset-3 col-sm-2">
							<button type="button" class="btn btn-primary mySearch" style="width: 90%;" id="search">
								search</button>
						</div>
						<div class="actions col-sm-2">
							<button type="reset" class="btn btn-primary " style="width: 90%;" id="search">reset</button>
						</div>
					</div>
				</form>

				<hr>

				<table class="display table table-bordered myDataTable" id="table" data-pagination="true" data-search="true"
				data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
				style="word-wrap: break-word">
				</table>

			</div>

		</div>

		<script>

				var kind = "@kind"

				$(document).ready(function () {

					Browse.init

				})

		</script>
	}